<template>
  <view :class="['body', now + 1 == state.questionList.length ? 'paddingBottom' : '']">
    <view class="top_info">
      <view class="title">智能饮食方案问卷</view>
      <view class="label">
        <img class="label_img" src="https://ainengli.meilianshuke.com/jkhx/common/shield.png" />
        <text>中国居民膳食指南 (2022)</text>
      </view>
    </view>
    <view class="question_body">
      <view class="question_num">
        <text>第{{ now + 1 }}题</text>
        <text>/共{{ state.questionList.length }}题</text>
      </view>
      <view class="remind">请填写您的真实情况，我们将根据您的情况为您匹配最合适的饮食方案</view>
      <view v-if="now == 0 && state.questionList.length > 0" class="set-info">
        <view class="cell">
          <view class="left">用户</view>
          <view class="right"
            >{{ userInfo.patientInfo.patName }}&nbsp;&nbsp;{{
              userInfo.patientInfo.gender
            }}&nbsp;&nbsp;{{ userInfo.patientInfo.age }}岁</view
          >
        </view>
        <view class="cell">
          <view class="left">身高</view>
          <view class="right">
            <input
              class="form_input"
              type="digit"
              @blur="heightfixed"
              v-model="baseInfo.height"
              placeholder="请输入"
              :border="false"
            />
            <text>cm</text>
          </view>
        </view>
        <view class="cell">
          <view class="left">当前体重</view>
          <view class="right">
            <input
              class="form_input"
              type="digit"
              @blur="weightfixed"
              v-model="baseInfo.weight"
              placeholder="请输入"
              :border="false"
            />
            <text>kg</text>
          </view>
        </view>
        <view class="topic_title">
          {{ state.questionList[now].list[2]?.questionName }}
          <view v-if="bmi < 24" class="tag needlose">您的体重未超标，不需要减重</view>
        </view>
        <view class="topics">
          <view
            v-for="(item, index) of state.questionList[now].list[2].options"
            :key="index"
            :class="[
              'topic',
              state.questionList[now].list[2].option.includes(item.id) ? 'active' : '',
              bmi < 24 ? 'disabled' : ''
            ]"
            @tap="answerSelect(item)"
            >{{ item.label }}</view
          >
        </view>
      </view>
      <view v-if="now > 0 && now + 1 < state.questionList.length && state.questionList.length > 0">
        <view class="topic_title">
          {{ state.questionList[now].list[0]?.questionName }}
          <view v-if="state.questionList[now].list[0].questionType == '多选'" class="tag"
            >多选</view
          >
        </view>
        <view class="topics">
          <view
            v-for="(item, index) of state.questionList[now].list[0].options"
            :key="index"
            :class="[
              'topic',
              state.questionList[now].list[0].option.includes(item.id) ? 'active' : ''
            ]"
            @tap="answerSelect(item)"
            >{{ item.label }}</view
          >
        </view>
      </view>
      <view v-if="now + 1 == state.questionList.length">
        <view class="topic_title">
          {{ state.questionList[now].list[0]?.questionName }}
          <view class="tag">{{ state.questionList[now].list[0]?.questionType }}</view>
        </view>
        <view @tap="searchShow = true" class="search-input">
          <up-icon name="search" color="#000" size="28" />
          搜索过敏和禁忌食物
        </view>
        <view class="allergy-foods">
          <view class="food-list">
            <view v-for="(item, index) of state.searchResults" :key="index" class="foods-item">
              {{ item }}
              <text @tap="removeFood(item)" style="padding: 0 4rpx; font-size: 36rpx">×</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="now + 1 != state.questionList.length" class="bottom">
      <view v-if="now != 0" @tap="prev" class="prev">上一题</view>
      <view v-if="now + 1 != state.questionList.length" @tap="next" class="next">下一题</view>
    </view>
    <view v-if="now + 1 == state.questionList.length" class="fixed">
      <button @tap="prev" class="pre-btn">上一题</button>
      <button @tap="next" class="confirm-btn">
        <!-- <img class="img-logo" src="https://ainengli.meilianshuke.com/jkhx/common/vip-white.png" /> -->
        提交
      </button>
    </view>
    <up-popup :show="searchShow" mode="bottom" :round="16" closeable @close="searchShow = false">
      <view class="search-body">
        <view class="title">搜索并选择</view>
        <view class="search-bar">
          <up-search
            v-model="state.searchValue"
            @custom="cancelSearch"
            @focus="state.searchFocus = true"
            @change="searchFood"
            :show-action="true"
            @clear="
              () => {
                state.isSearch = false
                state.searchList = []
              }
            "
            actionText="取消"
            placeholder="搜索过敏和禁忌食物"
          />
        </view>
        <!-- <uni-search-bar
          v-model="state.searchValue"
          @cancel="cancelSearch"
          @focus="state.searchFocus = true"
          @input="searchFood"
          @clear="
            () => {
              state.isSearch = false
              state.searchList = []
            }
          "
          cancelButton="always"
          placeholder="搜索过敏和禁忌食物"
        /> -->
        <!-- 搜索内容 -->
        <view v-if="state.searchFocus" class="search_content">
          <view v-if="state.searchHistory.length > 0 && !state.isSearch" class="search_history">
            <view class="history_top">
              <view class="title">搜索记录</view>
              <icon type="" @tap="clearSearchHistory" class="iconfont icon-shanchu1 img_del" />
            </view>
            <view class="history_content">
              <view
                class="history_item"
                v-for="(item, index) in state.searchHistory"
                :key="index"
                @tap="historySelect(item)"
              >
                {{ item }}
              </view>
            </view>
          </view>
          <view v-if="state.searchList.length === 0 && state.isSearch" class="nodata">
            <image
              class="img_nodata"
              src="https://ainengli.meilianshuke.com/jkhx/noSearchData.png"
            />
            <view class="nodata_text">暂无数据，换个搜索条件试试?</view>
          </view>
          <!-- <view class="search_list"> -->
          <scroll-view
            :scroll-top="scrollTop"
            :scroll-with-animation="true"
            class="search_list"
            scroll-y="true"
          >
            <view
              class="search_item"
              v-for="(item, index) in state.searchList"
              :key="index"
              @tap="selectFoods(item)"
            >
              <view class="name">{{ item.dietName }}</view>
              <image
                v-if="item.checked"
                class="img_right"
                src="https://ainengli.meilianshuke.com/jkhx/common/checkbox-active.png"
              />
              <image
                v-if="!item.checked"
                class="img_right"
                src="https://ainengli.meilianshuke.com/jkhx/common/checkbox.png"
              />
            </view>
          </scroll-view>
          <!-- </view> -->
        </view>
        <view class="fixed">
          <button @tap="searchConfirm" class="confirm-btn popbtn">确定</button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { weight_info_question, weight_save } from '@/module/api/questionaire'
import { ref, reactive, computed, nextTick } from 'vue'
import { debounce, throttle, deepCopy, parseTime } from '@/utils/tools'
import { formatDate } from '@/utils/util'
import { search_food } from '@/api/food'
import { ai_recommend_food } from '@/module/api/food'
import { base_info } from '@/api/moreMessage'
import { get_new_weight } from '@/module/api/sports'
import store from '@/store'

const userInfo = ref({})

const state = reactive({
  questionList: [],
  questionInfo: {},
  searchFocus: false,
  isSearch: false,
  searchValue: '',
  searchHistory: [],
  searchList: [],
  searchResults: []
})
const baseInfo = ref({
  height: '',
  weight: ''
})
const disabledFood = ref('')
const searchShow = ref(false)
const now = ref(0)
const bmi = computed(() => {
  if (baseInfo.value.weight && baseInfo.value.height) {
    return (
      baseInfo.value.weight / ((baseInfo.value.height / 100) * (baseInfo.value.height / 100)) || 0
    )
  } else {
    return 25
  }
})
const scrollTop = ref(0)

let currentId = ''

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  if (!currentId || currentId !== userInfo.value.patientInfo.empi) {
    currentId = deepCopy(userInfo.value.patientInfo.empi)
    init()
  }
  if (userInfo.value.patientInfo.age < 6) {
    uni.showModal({
      title: '提示',
      content: '当前用户年龄过小，不建议使用食谱推荐服务，请选择其他用户',
      showCancel: false,
      confirmText: '回到首页',
      success: (res) => {
        if (res.confirm) {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      }
    })
  }
})

const init = () => {
  weight_info_question({ id: 1 }).then((res) => {
    state.questionList = JSON.parse(res.data.content)
    state.questionInfo = res.data
    state.questionList.forEach((item: any) => {
      item.list.forEach((val: any) => {
        val.option = ''
        val.scores = ''
      })
    })
    // baseInfo.value.height = state.questionList[0].list[0].inputText
    // baseInfo.value.weight = state.questionList[0].list[1].inputText
    getWeight()
  })
}
// 获取体重
const getWeight = () => {
  get_new_weight({ empi: userInfo.value.patientInfo.empi }).then((res) => {
    if (res.data) {
      baseInfo.value.height = res.data[1].itemValue
      baseInfo.value.weight = res.data[0].itemValue
    }
  })
}

const heightfixed = (val: any) => {
  const textArr = val.target.value.split('.')
  if (textArr.length > 1 && textArr[1].length > 1) {
    baseInfo.value.height = Number(textArr[0] + '.' + textArr[1]).toFixed(1)
  }
  if (Number(baseInfo.value.height) > 250) {
    baseInfo.value.height = '250'
  }
}
const weightfixed = (val: any) => {
  const textArr = val.target.value.split('.')
  if (textArr.length > 1 && textArr[1].length > 1) {
    baseInfo.value.weight = Number(textArr[0] + '.' + textArr[1]).toFixed(1)
  }
  if (Number(baseInfo.value.weight) > 200) {
    baseInfo.value.weight = '200'
  }
}

const answerSelect = throttle((item: any) => {
  let currentQuestion = {}
  const nextIndex = now.value === 0 ? (bmi.value < 24 ? -1 : 2) : 0
  currentQuestion = JSON.parse(JSON.stringify(state.questionList[now.value].list[nextIndex]))
  if (currentQuestion.questionType == '单选') {
    // 单选情况
    currentQuestion.value = item.value
    currentQuestion.option = item.id.toString()
    currentQuestion.scores = item.score
    state.questionList[now.value].list[nextIndex] = { ...currentQuestion }
    // nextTick(() => {
    //   next()
    // })
  } else {
    // 多选情况
    if (!currentQuestion.value || currentQuestion.value.length == 0) {
      currentQuestion.value = item.value
      currentQuestion.option = item.id.toString()
      currentQuestion.scores = item.score
    } else {
      // 多次选中
      if (!currentQuestion.option.includes(item.id)) {
        if (item.value == '以上都没有' || currentQuestion.value.includes('以上都没有')) {
          currentQuestion.value = item.value
          currentQuestion.option = item.id.toString()
          currentQuestion.scores = item.score
          currentQuestion.options.forEach((v: any) => {
            v.check = false
          })
        } else {
          currentQuestion.value = currentQuestion.value + ',' + item.value
          currentQuestion.option = currentQuestion.option + ',' + item.id
          currentQuestion.scores += item.score
        }
      } else {
        currentQuestion.value = currentQuestion.value.replace(item.value + ',', '')
        currentQuestion.value = currentQuestion.value.replace(',' + item.value, '')
        currentQuestion.value = currentQuestion.value.replace(item.value, '')
        currentQuestion.option = currentQuestion.option.replace(item.id + ',', '')
        currentQuestion.option = currentQuestion.option.replace(',' + item.id, '')
        currentQuestion.option = currentQuestion.option.replace(item.id, '')
        currentQuestion.scores -= item.score
      }
    }
    state.questionList[now.value].list[nextIndex] = { ...currentQuestion }
  }
}, 300)
const prev = () => {
  now.value -= 1
}

const next = debounce(() => {
  if (now.value == 0) {
    const regex = /\..*\./
    const result1 = regex.test(String(baseInfo.value.weight))
    const result2 = regex.test(String(baseInfo.value.height))
    if (result1 || result2) {
      uni.showToast({
        title: '身高体重格式错误，请输入正确格式',
        icon: 'none'
      })
      return
    } else if (
      !baseInfo.value.weight ||
      !baseInfo.value.height ||
      (bmi.value > 24 && !state.questionList[now.value].list[2].value)
    ) {
      uni.showToast({
        title: '请完成问卷填写！',
        icon: 'none'
      })
    } else {
      now.value += 1
    }
  } else if (now.value + 1 == state.questionList.length) {
    confirm()
  } else {
    if (state.questionList[now.value].list[0].value == '') {
      uni.showToast({
        title: '请完成问卷填写！',
        icon: 'none'
      })
    } else {
      now.value += 1
    }
  }
}, 300)

const cancelSearch = () => {
  state.searchValue = ''
  state.searchFocus = false
  state.isSearch = false
  state.searchList = []
}
const clearSearchHistory = () => {
  state.searchHistory = []
  uni.removeStorageSync('searchHistory')
}
const searchFood = debounce((e) => {
  if (e == '') {
    state.isSearch = false
    state.searchList = []
    return
  }
  state.isSearch = true
  search_food(state.searchValue).then((res) => {
    state.searchList = res.data
    state.searchList.forEach((item) => {
      // 如果已选中的列表没有为false, 有就为true
      item.checked = false
      state.searchResults.forEach((i) => {
        if (i == item.dietName) {
          item.checked = true
        }
      })
    })
    // 保存搜索历史记录
    if (state.searchHistory.indexOf(e) == -1) {
      if (state.searchHistory.length >= 10) {
        state.searchHistory.pop()
      }
      state.searchHistory.unshift(e)
    }
    uni.setStorageSync('searchHistory', JSON.stringify(state.searchHistory))
  })
}, 1000)
const historySelect = (val: string) => {
  state.searchValue = val
  searchFood(state.searchValue)
}
const selectFoods = (item: any) => {
  if (!item.checked) {
    item.checked = true
    if (state.searchResults.includes(item.dietName)) {
      state.searchResults = state.searchResults.filter((name: string) => name != item.dietName)
    } else {
      state.searchResults.push(item.dietName)
    }
  } else {
    item.checked = false
    state.searchResults = state.searchResults.filter((name: string) => name != item.dietName)
  }
}
const removeFood = (item: string) => {
  state.searchResults = state.searchResults.filter((name: string) => name != item)
}
const searchConfirm = () => {
  searchShow.value = false
  state.searchValue = ''
  state.searchFocus = false
  state.isSearch = false
  state.searchList = []
  disabledFood.value = state.searchResults.join(',')
}

const confirm = () => {
  // 给身高体重赋值
  state.questionList[0].list[0].inputText = baseInfo.value.height
  state.questionList[0].list[1].inputText = baseInfo.value.weight
  if (bmi.value < 24) {
    state.questionList[0].list[2].content = ''
  }
  const params = {
    clientId: 1,
    patientQuestionnaireAnswerVOs: []
  }
  state.questionList.forEach((item: any) => {
    item.list.forEach((val: any) => {
      const answerModel = {
        id: state.questionInfo.id,
        userId: userInfo.value.userId,
        empi: currentId,
        creator: '',
        createTime: state.questionInfo.createTime,
        updateTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        questionnaireId: state.questionInfo.questionnaireId,
        questionId: val.id,
        questionnaireRecordId: state.questionInfo.questionnaireId,
        optionId: '',
        content: '',
        extContent: val.questionType == '选择 + 输入' ? val.inputText : '',
        score: val.scores
      }
      if (val.questionType == '单选' || val.questionType == '输入') {
        const answer = {
          ...answerModel,
          optionId: val.questionType == '单选' ? val.option : '',
          content: val.questionType == '输入' ? val.inputText : val.value
        }
        params.patientQuestionnaireAnswerVOs.push(answer)
      } else if (val.questionType == '多选') {
        const arr1 = val.value.split(',')
        const arr2 = val.option.split(',')
        arr1.forEach((i: string, idx: number) => {
          const answer = {
            ...answerModel,
            optionId: arr2[idx],
            content: i
          }
          params.patientQuestionnaireAnswerVOs.push(answer)
        })
      } else {
        state.searchResults.forEach((v: any) => {
          const answer = {
            ...answerModel,
            content: v
          }
          params.patientQuestionnaireAnswerVOs.push(answer)
        })
      }
    })
  })
  debugger
  uni.showLoading({
    title: '正在提交中...',
    mask: true
  })
  weight_save(params).then((res) => {
    if (res.code == 0) {
      let params = {
        userId: userInfo.value.userId,
        empi: userInfo.value.patientInfo.empi
      }
      base_info(params).then((res) => {
        userInfo.value.patientInfo = res.data
        userInfo.value.patientInfo['dietQuestionState'] = true
        store.commit('SET_USERINFO', userInfo.value)
        uni.hideLoading()
        uni.showToast({
          title: '问卷提交成功',
          icon: 'none',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              if (
                store.state.CLIENTTYPE === 'checkAfterMini' &&
                !userInfo.value.patientInfo.reportState
              ) {
                uni.redirectTo({ url: '/packA/pages/questionaire/physical' })
              } else {
                if (userInfo.value.patientInfo.isSet) {
                  const params = {
                    empi: userInfo.value.patientInfo.empi,
                    recommendDate: parseTime(new Date().getTime() + 86400000, '{yyyy}-{mm}-{dd}')
                  }
                  ai_recommend_food(params).then((res) => {
                    if (
                      userInfo.value.patientInfo.questionnaireRecordId &&
                      res.data &&
                      res.data.itemContent
                    ) {
                      uni.redirectTo({
                        url: '/module/src/pages/food/smartFood/recommend'
                      })
                    } else {
                      uni.redirectTo({
                        url: '/module/src/pages/food/smartFood/risk'
                      })
                    }
                  })
                } else {
                  uni.redirectTo({ url: '/packA/pages/questionaire/risk' })
                }
              }
            }, 2000)
          }
        })
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  overflow: auto;

  .top_info {
    position: relative;
    height: 512rpx;
    padding: 48rpx 32rpx;
    background: linear-gradient(180deg, rgb(172 235 242 / 28%) 0%, #f3f7f8 100%);

    .title {
      position: relative;
      z-index: 2;
      margin-bottom: 24rpx;
      font-size: 48rpx;
      font-weight: 700;
      color: #222;
    }

    .label {
      position: relative;
      z-index: 2;
      display: inline-block;
      padding: 10rpx 32rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #fff;
      background: #00d1b6;
      border: 1rpx solid #00d1b6;
      border-radius: 28rpx;

      .label_img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
        transform: translateY(4rpx);
      }
    }
  }

  .question_body {
    position: relative;
    z-index: 2;
    padding: 32rpx;
    margin: 0 32rpx;
    margin-top: -286rpx;
    font-size: 28rpx;
    background: #fff;
    border-radius: 16rpx;

    .question_num {
      font-weight: 700;
      color: #222;
    }

    .remind {
      margin-top: 16rpx;
      font-weight: 400;
      color: #999;
    }

    .cell {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 108rpx;
      border-bottom: 1rpx solid #e5e6eb;

      .left {
        font-size: 30rpx;
        font-weight: 700;
        color: #222;
      }

      .right {
        display: flex;
        gap: 24rpx;
        justify-content: flex-end;
        font-size: 30rpx;
        font-weight: 400;
        color: #222;

        .form_input {
          text-align: right;
        }

        text {
          display: inline-block;
          width: 42rpx;
          text-align: left;
        }
      }
    }

    .topic_title {
      display: flex;
      align-items: center;
      margin-top: 40rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #222;

      .tag {
        display: inline-block;
        padding: 4rpx 16rpx;
        margin-left: 8rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
        text-align: center;
        background: #5c8eff;
        border-radius: 4rpx;
      }

      .needlose {
        background: #ff813c;
      }
    }

    .search-input {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 84rpx;
      padding: 22rpx 24rpx;
      margin-top: 24rpx;
      font-size: 30rpx;
      font-weight: 400;
      line-height: 84rpx;
      color: #999;
      background: #fff;
      border: 2rpx solid #000;
      border-radius: 48rpx;
    }

    .allergy-foods {
      height: 560rpx;
      margin-top: 24rpx;
      overflow: auto;

      .food-list {
        display: flex;
        flex-wrap: wrap;
        gap: 24rpx;
        justify-content: left;

        .foods-item {
          display: flex;
          align-items: center;
          height: 64rpx;
          padding: 0 16rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #00d1b6;
          background: rgb(0 209 182 / 10%);
          border-radius: 4rpx;
        }
      }
    }

    .topics {
      margin-top: 40rpx;
      max-height: 700rpx;
      overflow-y: auto;

      .topic {
        width: 100%;
        height: 88rpx;
        padding-left: 32rpx;
        margin-bottom: 24rpx;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 88rpx;
        text-align: left;
        background: #fafafa;
        border-radius: 8rpx;
      }

      .active {
        color: #00d1b6;
        background: rgb(0 209 182 / 5%);
        border: 1rpx solid #00d1b6;
      }

      .disabled {
        color: #ccc;
        background: #f5f5f5;
        border: 1rpx solid #e5e6eb;
      }
    }
  }

  .bottom {
    display: flex;
    gap: 26rpx;
    justify-content: space-between;
    margin: 32rpx;
    font-size: 32rpx;
    font-weight: 700;

    .prev,
    .next {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      border-radius: 44rpx;
    }

    .prev {
      color: #00d1b6;
      border: 1rpx solid #00d1b6;
    }

    .next {
      color: #fff;
      background: #00d1b6;
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;
    border: 1rpx solid #e5e6eb;

    .pre-btn {
      width: 48%;
      font-size: 32rpx;
      font-weight: 700;
      color: #00d1b6;
      background: #fff;
      border: 1rpx solid #00d1b6;
      border-radius: 44rpx;
    }

    .confirm-btn {
      width: 48%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;

      .img-logo {
        width: 32rpx;
        height: 32rpx;
        transform: translateY(4rpx);
      }
    }
  }

  .search-body {
    // 搜索弹窗
    width: 100vw;
    height: calc(100vh - 160rpx);

    .title {
      height: 108rpx;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 108rpx;
      color: #222;
      text-align: center;
      border-bottom: 1rpx solid #e5e6eb;
    }
    .search-bar {
      padding: 24rpx 32rpx;
    }

    .search_content {
      // height: calc(100vh - 524rpx);
      background: #fff;

      .search_history {
        margin: 0 32rpx;

        .history_top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .title {
            font-size: 30rpx;
            font-weight: 700;
            color: #333;
          }

          .img_del {
            width: 40rpx;
            height: 40rpx;
            font-size: 40rpx;
            color: #999;
          }
        }

        .history_content {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;
          justify-content: flex-start;

          .history_item {
            padding: 10rpx 30rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #666;
            background: #fafafa;
            border-radius: 30rpx;
          }
        }
      }

      .nodata {
        text-align: center;

        .img_nodata {
          width: 320rpx;
          height: 240rpx;
          margin-top: 222rpx;
        }

        .nodata_text {
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }
      }

      .search_list {
        height: calc(100vh - 524rpx);
        overflow: auto;
        background: #fff;

        .search_item {
          position: relative;
          box-sizing: border-box;
          height: 108rpx;
          padding: 34rpx 32rpx;
          border-bottom: 1rpx solid #e5e6eb;

          .name {
            font-size: 30rpx;
            font-weight: 500;
            color: #222;
          }

          .img_right {
            position: absolute;
            top: 50%;
            right: 32rpx;
            width: 40rpx;
            height: 40rpx;
            margin-top: -20rpx;
          }
        }
      }
    }

    .popbtn {
      width: 100%;
    }
  }
}

.paddingBottom {
  padding-bottom: 184rpx;
}

::v-deep .u-search {
  padding: 10px;
}

::v-deep .u-search__content__input--placeholder {
  font-size: 30rpx !important;
  color: #999 !important;
}

::v-deep .u-search__content {
  justify-content: flex-start;
  height: 80rpx !important;
  padding: 20rpx 24rpx !important;
  background-color: #fff !important;
  border: 2rpx solid #000;
  border-radius: 40rpx !important;
  border-color: #000 !important;
}

::v-deep .u-search__content__icon {
  padding: 0 !important;

  .u-icon .u-icon__icon {
    color: #000 !important;
  }
}

::v-deep .u-search__content__input {
  font-size: 30rpx !important;
  background-color: #fff !important;
}

::v-deep .u-search__action {
  font-size: 30rpx !important;
  font-weight: 500;
  line-height: 80rpx !important;
  color: #00d1b6 !important;
}

::v-deep .u-icon__icon {
  font-size: 44rpx !important;
  line-height: 50rpx !important;
}
</style>
